<template>
  <div class="table-page">
    <Gi-table
      row-key="id"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      v-model:columns="columns"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增角色</span>
        </a-button>
      </template>
      <template #status="{ record }">
        <a-switch v-model="record.status" size="medium">
          <template #checked>有效</template>
          <template #unchecked>无效</template>
        </a-switch>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="text" @click="onAddOrEdit(record)" size="small">
            <span>编辑</span>
          </a-button>
          <a-popconfirm type="error" content="您确定要删除该角色吗?" @ok="onDelete(record.id)">
            <a-button type="text" size="small">
              <span>删除</span>
            </a-button>
          </a-popconfirm>
          <a-button type="text" size="small" @click="allocation(record.id, record.name)">
            <span>权限分配</span>
          </a-button>
        </a-space>
      </template>
    </Gi-table>
    <EditRoleModal ref="EditRoleModalRef" @getTableData="getTableData"></EditRoleModal>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { roleList, roleDelete } from '@/apis'
import { Message } from '@arco-design/web-vue'
import EditRoleModal from './EditRoleModal.vue'

defineOptions({ name: 'role' })

const router = useRouter()
const columns = [
  {
    title: '角色名称',
    dataIndex: 'name'
  },
  {
    title: '角色分组',
    dataIndex: 'guard_name'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at'
  },
  {
    title: '描述',
    dataIndex: 'description',
    render: ({ record }) => {
      return record.description || '--'
    }
  },
  {
    title: '操作',
    slotName: 'action'
  }
]

const EditRoleModalRef = ref()

const loading = ref(false)
const listParams = {
  page: 1
}
const tableData = ref([])

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })

const onAddOrEdit = (item) => {
  EditRoleModalRef.value?.addOrEdit(item)
}

const allocation = (id, name) => {
  router.push({
    name: 'pAssignment',
    query: { id, name }
  })
}

const getTableData = async () => {
  loading.value = true
  listParams.page = pagination.current
  const res = await roleList(listParams)
  tableData.value = res.data.data
  setTotal(res.data.total)
  loading.value = false
}
getTableData()

// 删除用户
const onDelete = async (id) => {
  try {
    loading.value = true
    const res = await roleDelete({ id })
    Message.success(res.message)
    getTableData()
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
